<template>
	<view style="background-color: #F8F8F8;" v-if="detail">
		<view class=""><!-- nav-back -->
			<top-heigth></top-heigth>
			<uv-navbar leftText="北京" :fixed="false" title="商品详情" bg-color="rgba(0,0,0,0)" :safeAreaInsetTop="false">
				<template v-slot:right>
					<view v-if="detail.isCollect == 0" class="uv-nav-slot" 
					@click="startBox(detail.id,detail.isCollect)">
						<image src="/static/image/start3.png" style="width: 40rpx; height: 40rpx;" mode=""></image>
					</view>
					<view v-if="detail.isCollect == 1" class="uv-nav-slot" 
					@click="startBox(detail.id,detail.isCollect,detail.tAppUserCollectVo.id,detail.tAppUserCollectVo.version)">
						<image src="/static/image/start-choose.png" style="width: 40rpx; height: 40rpx;" mode=""></image>
					</view>
				</template>
				<template v-slot:left>
					<view @click="goback()" class="uv-nav-slot">
						<image src="/static/image/go.png" style="width: 40rpx; height: 40rpx;" mode=""></image>
					</view>
				</template>
			</uv-navbar>
		</view>
		
		<view class="people-img">
			<image :src="detail.serviceImage" mode="widthFix"></image>
		</view>
		<view class="content-box m-t24">
			<view class="public-box m-b16">
				<h1 class="font-h1 m-b16">{{detail.serviceName}}</h1>
				<view class="font-bottom">
					<view class="font-bottom-l">
						<view class="red">
							<span class="goods-span-red">¥</span>{{detail.serviceAmount}}
						</view>
						<view class="grey"></view>
					</view>
					<view class="font-hui">销量 {{detail.serviceBaseTime}}</view>
				</view>
			</view>
			
			<view class="public-box m-b16">
				<view class="detail-title">
					<view class="title-box">
						<view class="line"></view>
						<h1 class="title-h1">项目介绍</h1>
					</view>
				</view>
				<view class="detail-font m-b32">
					<uv-parse :content="detail.serviceDesc"></uv-parse>
				</view>
			</view>
		</view>
		<view style="height: 130rpx;"></view>
		<view class="goods-buy">
			<view class="goods-buy-box">
				<view class="goods-buy-icon" @click="openChat" v-if="!isShenhe">
					<image src="/static/image/kf.png" mode=""></image>
					<view>客服</view>
				</view>
				<view @click="goOrderDetail(detail.id)" class="goods-buy-red">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TopHeigth from '@/components/TopHeigth.vue'
	import { checkLogin } from "@/util/checkLogin.js"
	import { TUIConversationService } from "@tencentcloud/chat-uikit-engine";
	
	export default {
		data() {
			return {
				id:'',
				detail: null,
				userInfo:uni.getStorageSync('userInfo'),
				isShenhe: 1
			}
		},
		
		components: { TopHeigth },
		onLoad(e) {
			this.id = e.id
			this.listBox()
			uni.$u.http.post('/api/shop/v1_0/linyue/version',{}).then((res) => {
				this.isShenhe = !res.data
			})
		},
		methods: {
			startBox:function(id,type,listId,version){
				checkLogin(() => {
					if(type == 0){ // 收藏
						console.log("收藏")
						uni.$u.http.post('/api/shop/v1_0/tAppUserCollectRCA/insertTAppUserCollect',{
							appUserId:this.userInfo.id,
							collectType:2, //1技师 2服务
							//staffId:id,
							staffServiceId:id //技师服务id
						}).then((res) => {
							uni.showToast({
								icon: "none",
								title: res.message
							})
							if(res.code == 200){
								console.log("chengg")
								this.listBox()
							}
						})
					} else{ //取消收藏
						uni.$u.http.post('/api/shop/v1_0/tAppUserCollectRCA/deleteTAppUserCollect',{
							//id:listId,
							version:version,
							isOn:1,
							id:listId //技师服务id
						}).then((res) => {
							uni.showToast({
								icon: "none",
								title: res.message
							})
							if(res.code == 200){
								this.listBox()
							}
						})
					} 
					
				})
			},
			listBox:function(){
				uni.$u.http.post('/api/shop/v1_0/tAppServiceRCA/turnTAppServiceInfo',{
					id:this.id,
				}).then((res) => {
					 this.detail = res.data
				})
			},
			goOrderDetail(id){
				checkLogin(() => {
					uni.navigateTo({
						url:"/pages/order/confirmOrder?id="+id
					})
				})
				
			},
			goback(){
				uni.navigateBack()
			},
			openChat() {
				checkLogin(() => {
					// 切换会话进入聊天
					const conversationID = `C2CLinYue`;
					// #ifdef APP-PLUS || H5
					TUIConversationService.switchConversation(conversationID);
					// #endif
					uni.navigateTo({
					  url: `/TUIKit/components/TUIChat/index?conversationID=${conversationID}`,
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.people-img{
		width: 100%;
		/* height:740rpx; */
		background: #f5f5f5;
		text-align: center;
		overflow: hidden;
		display: flex;
		align-items: center;
		image{
			width: 100%;
			/* height:740rpx; */
		}
	}
	
	.list-box{
		position: relative;
		border-radius:24rpx;
		padding: 32rpx 24rpx;
		display: flex;
		justify-content: flex-start;
		margin-bottom: 24rpx;
		background-color: #fff;
	}
	
	.list-center{
		/* width: calc(100% - 344rpx); */
		margin-right: 24rpx;
		h1{
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 8rpx;
		}
		.time{
			display: flex;
			justify-content: flex-start;
			font-size: 22rpx;
			margin-bottom: 8rpx;
			.time-b-red{
				height: 34rpx;
				line-height: 34rpx;
				color: #fff;
				background: #FF1818;
				border-radius: 4rpx;
				border: 2rpx solid #FF1818;
				z-index: 9;
				padding: 0 8rpx;
			}
			.time-f-red{
				height: 34rpx;
				line-height: 34rpx;
				color: #FF1818;
				background: rgba(255,0,0,0.08);
				border: 2rpx solid rgba(255,24,24,0.3);
				border-left: 0;
				border-radius: 0 4rpx 4rpx 0;
				margin-left: -2rpx;
				padding: 0 8rpx;
			}
		}
		
		
	}
	.list-bottom-box{
		display: flex;
		justify-content: space-between;
	}
	.list-bottom{
		width: calc(100% - 200rpx);
		.font{
			color: #999999;
			font-size: 24rpx;
			span{
				color:#FFA23E;
				margin-right: 8rpx;
				font-weight: bold;
			}
		}
		.font-flex{
			display: flex;
			justify-content: flex-start;
			.shop{
				width: calc(100% - 150rpx);
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
		}
	}
	.font{
		color: #999999;
		font-size: 24rpx;
		span{
			color:#FFA23E;
			margin-right: 8rpx;
			font-weight: bold;
		}
	}
	.list-center-top{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	
	
	.icon-font{
		display: flex;
		justify-content: flex-end;
		color: #999999;
		font-size: 24rpx;
	}
	.t-but{
		width: 160rpx;
		border-radius: 48rpx;
		font-size: 22rpx;
		text-align: center;
		height: 48rpx;
		line-height: 48rpx;
		margin-top: 24rpx;
	}
	
	
	
	.detail-font{
		font-size: 26rpx;
		color: #666;
		line-height: 40rpx;
		span{
			margin-right: 20rpx;
		}
	}
	/* --------------- */
	.detail-img{
		margin-bottom:24rpx ;
		image{
			width: 100%;
			margin-bottom: 24rpx;
		}
	}
	
	.font-bottom{
		display: flex;
		align-items: flex-end;
		justify-content:space-between;
		.font-bottom-l{
			display: flex;
			align-items: flex-end;
			justify-content: flex-start;
			.goods-span-red{
				font-size: 24rpx;
			}
			.red{
				color: #F82727;
				font-size: 34rpx;
				font-weight: bold;
				margin-right: 16rpx;
				span{
					
				}
			}
			.grey{
				color: #999;
				font-size: 24rpx;
				text-decoration-line: line-through;
			}
		}
	}
	
	.goods-buy{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		box-shadow: 0 10rpx 30rpx 5rpx rgba(0,0,0,0.5);
		
	}
	.goods-buy-box{
		height: 100rpx;
		padding: 0 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.goods-buy-red{
		background:#EB0C00;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
		width: 85%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
	}
	.goods-buy-icon{
		font-size:20rpx;
		color: #555252;
		image{
			width: 48rpx;
			height: 48rpx;
		}
		
	}
</style>
